<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'BarStrip',
  props: {
    barData: Object,
    text: String,
    subtext: String,
    
  },
  mounted () {
    this.$nextTick(() => {
      // let xAxisData = Object.keys(this.value)
      // let seriesData = Object.values(this.value1);
      //  let seriesData1 = Object.values(this.value2);
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
         tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
       },
        legend: {
        "textStyle": {
            "color": "#333"
        }
       },
        xAxis: {
         type:'value',
           splitLine:{show: false},//去除网格线
        },
        yAxis:  [          
        {
            type: 'category',
             data: ['其他','综合执法','执法执勤','一般公务',],
            name:'车辆数(台)',
            min: 0,
             position: 'left',
           splitLine:{show: false},//去除网格线
            axisLine:{//x轴、y轴的深色轴线，如图2
              show: true,
              lineStyle:{
                    color:"#999",
                    
              }
            },
             axisLabel: {
                   textStyle: {
                       color: '#333',
                   }
              },
        }
    ],
       series: [
        {
            name: '车辆数量',
            type: 'bar',
           data: [31, 107,235 ,203 ],
           itemStyle:{
             normal:{
               label:{
                 show: true,
                 position:'right',
                 textStyle: { //数值样式
										color: '#333',
										fontSize: 14
									}
               }
             }
           }
        },
       
    ],
        color: this.barData.color,
      }
      let dom = echarts.init(this.$refs.dom, 'tdTheme')
      dom.setOption(option)
    })
  }
}
</script>

<style lang="less">
.charts{
  //
}
</style>
